<template>
	<view>
		<view style="width: 100%; border-bottom: 0 none; position: fixed; z-index: 2">
			<view style="background: #ffffff; position: relative">
				<view class="h-tab vp-flex">
					<view :class="'h-tab-item vp-flex_1 ' + (filt == '' ? 'on' : '')" data-filt=""
						@tap="onFilterChange">全部</view>
					<view :class="'h-tab-item vp-flex_1 ' + (filt == 1 ? 'on' : '')" data-filt="1"
						@tap="onFilterChange">待支付</view>
					<view :class="'h-tab-item vp-flex_1 ' + (filt == 2 ? 'on' : '')" data-filt="2"
						@tap="onFilterChange">待服务</view>
					<view :class="'h-tab-item vp-flex_1 ' + (filt == 3 ? 'on' : '')" data-filt="3"
						@tap="onFilterChange">服务中</view>
					<view :class="'h-tab-item vp-flex_1 ' + (filt == 4 ? 'on' : '')" data-filt="4"
						@tap="onFilterChange">已完成</view>
					<view :class="'h-tab-item vp-flex_1 ' + (filt == 5 ? 'on' : '')" data-filt="5"
						@tap="onFilterChange">已取消</view>
				</view>
			</view>
		</view>
		<view style="height: 100rpx"></view>
		
		<view v-if="list != null">
			<view v-if="list != null && list.length == 0" style="padding: 40rpx 40rpx 40rpx 40rpx; text-align: center">
				<image src="/static/resource/images/empty.png" mode="widthFix" style="width: 200rpx" />
				<view class="f5">没有相关内容~</view>
			</view>
			<view v-else class="od-list">
				<view v-for="(item, index) in list" :key="index">
					<view class="od-item" @tap="toOrder" :data-id="item.out_trade_no">
						<view class="weui-cell weui-cell_access">
							<view class="weui-cell__hd">
								<view>
									<!-- 订单图片 -->
									<image src="/static/resource/images/empty.png" mode="widthFix" class="od-logo"
										style="width: 100rpx; height: 100rpx; margin-right: 20rpx" />
								</view>
							</view>
							<view class="weui-cell__bd">
								<view>
									<text style="font-weight: bold; font-size: 25rpx;">{{ item.remark}}</text>
								</view>
								<view class="od-info">
									<view>
										<!-- <view>
											<text>{{ item.userId }}（{{ item.userId }}）</text>
										</view> -->
										<view>
											预约时间：
											<text>{{ item.createTime }}</text>
											<!-- <formater :timestamp="item.creatTime" format="yyyy-MM-dd HH:mm:ss"></formater> -->
										</view>
										<view>
											就诊人员：
											<text>{{ item.username }}</text>
										</view>
									</view>
									<view>
										<view>
											<text>{{ item.adressId }}{{ item.adressId }}</text>
										</view>
										<!-- <view>
											处理时间：
											<formater :timestamp="item.userId" format="MM-dd hh:mm"></formater>
										</view> -->
									</view>
									<view>
										<!-- <view>
											服务时间：
											<text>{{ item.createTime }}</text>
										
										</view> -->
										<!-- 	<view>
											服务对象：
											<text>{{ item.userId }}</text>
										</view> -->
										<view>服务地址：
											<text>{{item.address}}</text>
										</view>
									</view>
								</view>
							</view>
							<view class="weui-cell__ft">
								<!-- 待付款 -->
								<view v-if="item.status == '1'">
									<view style="color: #ffa200"><text>待支付</text></view>
									<view style="color: #ffa200">
										<counter :second="item.payMethod" @counterOver="handleCounterOver" />
									</view>
								</view>
								<!-- 进行中 -->
								<block v-if="item.status == '2'">
									<view style="color: #1da6fd"><text>待服务</text></view>
								</block>
								<block v-if="item.status == '0'">
									<view style="color: #ffa200"><text>待接单</text></view>
								</block>
								<!-- 已完成 -->
								<block v-if="item.status == '3'">
									<view style="color: #21c521"><text>服务中</text></view>
								</block>
								<!-- 已完成 -->
								<block v-if="item.status == '4'">
									<view style="color: #21c521"><text>已完成</text></view>
								</block>
								<!-- 已取消 -->
								<block v-if="item.status == '5'">
									<view style="color: #999999"><text>已取消</text></view>
								</block>
								<view>
									<view>￥{{item.amount}}
									</view>
								</view>
							</view>

						</view>
					</view>
					<view class="od-item1">
						<button class="but1" v-if="item.status == '3'" @tap="orderjindu(item.id)">查看进度</button>
						<button class="but1" v-if="item.status == '3'" @tap="chat(item.id)">消息</button>
						<button class="but1" v-if="item.status == '2'" @tap="chat(item.id)">消息</button>
						<button class="but1" v-if="item.status == '2'" @tap="orderUpdate(item.id)">修改信息</button>
						<button class="but1" v-if="item.status == '0'" @tap="orderUpdate(item.id)">修改信息</button>
						<button class="but1" v-if="item.status == '1'" @tap="orderDetail(item.orderNumber)"
							style="color: #21c521;">立即支付</button>
						<button class="but1" v-if="item.status == '5'" @tap="deleteOrder(item.id)"
							style="color: #ff0000;">删除订单</button>
						<button class="but1" @tap="orderDetail(item.orderNumber)">订单详情</button>
					</view>
				</view>
			</view>
		</view>

	</view>

</template>
<script>
	import {
		apiUrl
	} from '@/config/config.js';
	import counter from "@/components/counter/counter.vue"
	export default {
		components: {
			counter
		},
		data() {
			return {
				filt: '', // 记录当前的tab
				list: null, // 订单列表数据
				isLogin: false,
				apiUrl: apiUrl,
			}
		},
		onLoad(options) {
			this.filt = options.filt //接受上一个页面传过来的参数
			// 页面展示时调用订单列表
			this.loadList();
			this.checkLogin1();
		},
		methods: {
			checkLogin1() {
				try {
					const value = uni.getStorageSync('islogin_key');
					if (value) {
						this.isLogin = value;
					}
				} catch (e) {
					// error
				}
			
			},
			deleteOrder(id) {
				// console.log(`删除订单${id}`)
				uni.showModal({
					title: '友情提示',
					content: '您确定要删除该订单吗?',
					success: (res) => {
						if (res.confirm) {
							try {
								uni.request({
									url: this.apiUrl + `/api/order/${id}`,
									method: 'DELETE',
									success: (res) => {
										if (res.data.code == '200') {
											this.loadList();
										}
									}
								})
							} catch (e) {
								// error
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}

					}
				})

			},

			orderDetail(orderNumber) {
				console.log(`订单详情${orderNumber}`)
				uni.navigateTo({
					url: `/pages/order/order-details?orderNumber=${orderNumber}`
				});
			},

			orderUpdate(id) {
				console.log(`修改信息${id}`)
				uni.navigateTo({
					url: `/pages/order/edit?id=${id}`
				});
			},
			chat(id){
				uni.navigateTo({
					url: `/pages/order/chat/chat?id=${id}`
				});
			},
			orderjindu(id) {
				console.log(`订单进度${id}`)
				uni.navigateTo({
					url: `/pages/order/jindu?id=${id}`
				});
			},

			handleCounterOver() {
				// 倒计时结束时触发的逻辑
				console.log('倒计时结束');
				// 可以在这里进行一些操作，比如显示提示信息、更新订单状态等
			},
			// 订单状态筛选
			onFilterChange(e) {
				const curFilt = e.currentTarget.dataset.filt;
				if (curFilt === this.filt) return;
				this.filt = curFilt;
				this.loadList();
			},
			// 订单列表加载
			loadList() {
				uni.request({
					url: this.apiUrl + "/api/order/orderList2",
					method: 'GET',
					data: {
						status: this.filt,
					},
					header:{
						account: uni.getStorageSync('account_key')
					},
					success: res => {
						this.list = res.data.data;
					},
					fail: res => {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						});
					}
				});
			},
			// 跳转订单详情
			toOrder(id) {
				uni.navigateTo({
					url: `../order/order?oid=${id}`
				});
			},
		},
	}
</script>




<style>
	@import './index.css'
</style>